<template>
	<view class="page cp" :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="改签"></c-nav-bar>
		<view class="box">
			<view class="item">
				<view class="left">出发地点</view>
				<view class="right">
					<view class="text">{{info.startPortName}}</view>
				</view>
			</view>
			<view class="item">
				<view class="left">到达地点</view>
				<view class="right">
					<view class="text">{{info.endPortName}}</view>
				</view>
			</view>
			<view class="item" @tap="show=true">
				<view class="left">改签日期</view>
				<view class="right">
					<view class="text">{{date}}<span>{{week}}</span></view>
				</view>
				<image src="@/static/my/commonInformation/icon_yjt.png"></image>
			</view>
		</view>
		<view class="query" @tap="query">
			查询可改签航班
		</view>
		<u-calendar title="选择改签日期" :defaultDate="defaultDate" confirmDisabledText="确定" :show="show" mode="single"
			@confirm="confirm" @close="show=false" color="#007A69" :formatter="formatter" ref="calendar">
		</u-calendar>
	</view>
</template>

<script>
	var maxQueryDayNum = '';
	export default {
		name: 'changeTicketQuery',
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				info: null,
				date: new Date().Format('yyyy-MM-dd'),
				weekCfg: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				week: '',
				defaultDate: new Date().Format('yyyy-MM-dd'),
				show: false
			}
		},
		async onLoad(option) {
			await this.getMaxDate();
			this.$refs.calendar.setFormatter(this.formatter);
			if (uni.getStorageSync('change_ticket_info')) {
				this.info = JSON.parse(uni.getStorageSync('change_ticket_info'));
			}
			this.week = this.weekCfg[new Date().getDay()];
		},
		methods: {
			confirm(e) {
				this.date = new Date(e[0]).Format('yyyy-MM-dd');
				this.week = this.weekCfg[new Date(e[0]).getDay()];
				this.show = false;
			},
			query() {
				let query = {
					from: this.info.startPortName,
					to: this.info.endPortName,
					startPortNo: this.info.startPortNo,
					endPortNo: this.info.endPortNo,
					startDate: this.date,
					pzlx: 0
				};
				uni.navigateTo({
					url: '/pagesIndex/steamerTicket/selectFlight?type=changeTicket&item=' + JSON.stringify(query)
				})
			},
			getMaxDate() {
				return new Promise((resolve,reject)=>{
					this.$api.get('/travel/isshipsaleconfig/page').then(res => {
						if (res.data.code === 0) {
							if (res.data.data.list.length > 0) {
								maxQueryDayNum = +res.data.data.list[0].wysts;
							}
							resolve();
						} else this.$showModal(res.data.msg);
					})
				})
			},
			formatter(day) {
				if (maxQueryDayNum) {
					for (let i = 0; i <= maxQueryDayNum; i++) {
						let now = new Date(new Date().getFullYear() + '-' + day.month + '-' + day.day).Format(
							'yyyy-MM-dd');
						let temp = new Date(new Date().setDate(new Date().getDate() + i)).Format('yyyy-MM-dd');
						if (now == temp) {
							day.bottomInfo = '可售'
						}
					}
					return day
				}
			},
		}
	}
</script>

<style scoped lang="less">
	.page {
		background: #F5F8FA;
		padding: 59rpx 24rpx;

		.box {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-top: 59rpx;

			.item {
				padding: 37rpx 0;
				display: flex;
				align-items: center;
				position: relative;
				border-bottom: 1rpx solid #F5F8FA;

				&:last-child {
					border-bottom: none;
				}

				.left {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
				}

				.right {
					display: flex;
					align-items: center;
					padding-left: 48rpx;

					.text {
						font-size: 34rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;

						span {
							font-size: 30rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
							margin-left: 24rpx;
						}
					}
				}

				image {
					width: 24rpx;
					height: 24rpx;
					position: absolute;
					right: 0;
					top: 50%;
					margin-top: -12rpx;
				}
			}
		}

		.query {
			width: 100%;
			height: 88rpx;
			background: #007A69;
			border-radius: 44rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #FFFFFF;
			letter-spacing: 2rpx;
			margin-top: 131rpx;
		}
	}
</style>

<style>
	.cp .u-calendar-month__days__day {
		height: 104rpx !important;
	}

	.u-calendar__confirm .u-button {
		width: calc(100% - 24rpx) !important;
		height: 88rpx !important;
		background: #007A69 !important;
		border-radius: 44rpx !important;
	}

	.u-calendar__confirm .u-button text {
		font-size: 32rpx !important;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF !important;
	}

	.u-calendar scroll-view {
		height: 600rpx !important;
	}

	/* .u-calendar-month__days__day__select {
		background-color: #007A69 !important;
	} */
</style>